<template>

  <div class="app-container">
    <div class="filter-container">
      {{ $t('wechat.search') }}  <el-select v-model="listQuery.status" :placeholder="$t('wechat.all')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in wechatTypeOptions" :key="item.key.toString()" :label="item.display_name" :value="item.key.toString()" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('wechat.nick_name')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('wechat.real_name')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('wechat.image_url')" width="110px" align="center">
        <template slot-scope="{row}">
          <img :src="row.imageUrl" style="width:50px;height:50px;">
        </template>
      </el-table-column>
      <el-table-column :label="$t('wechat.content')" align="center">
        <template slot-scope="{row}">
          <span>{{ row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('wechat.postCreateTime')" align="center">
        <template slot-scope="{row}">
          <span>{{ dateFormat(row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('wechat.status')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status==0?'下架':'上架' }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('wechat.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="getPostAndComments(row)">
            {{ $t('wechat.detail') }}
          </el-button>
          <el-button v-if="row.status==1" size="mini" type="success" @click="handleModifyStatus(row,'0')">
            {{ $t('wechat.the_shelves') }}
          </el-button>
          <el-button v-if="row.status==0" size="mini" type="success" @click="handleModifyStatus(row,'1')">
            {{ $t('wechat.shelves') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog title="帖子详情" :visible.sync="dialogFormVisible">
      <el-form :model="detail.postdata" label-position="left" label-width="70px" style="width: 100%; margin-left:50px;">
        <el-row>
          <el-col span="8">
            <el-form-item label="作者名称" prop="type">
              <span>{{ detail.postdata.realName }}</span>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item :label="$t('wechat.postCreateTime')" prop="type">
              <span>{{ dateFormat(detail.postdata.createTime) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="8">
            <el-form-item label="作者昵称" prop="type">
              <span>{{ detail.postdata.nickName }}</span>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="状态" prop="type">
              <span>{{ detail.postdata.status==1?'上架':'下架' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="8">
            <el-form-item label="图文内容" prop="type">
              <span>{{ detail.postdata.content }}</span>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="图文图片" prop="type">
              <span><img :src="detail.postdata.imageUrl" style="width:50px;height:50px;"></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="detail.postcoments"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >

        <el-table-column :label="$t('wechat.nick_name')" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户头像" width="110px" align="center">
          <template slot-scope="{row}">
            <img :src="row.avatarUrl" style="width:50px;height:50px;">
          </template>
        </el-table-column>
        <el-table-column label="评论内容" align="center">
          <template slot-scope="{row}">
            <span>{{ row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评论时间" align="center">
          <template slot-scope="{row}">
            <span>{{ dateFormat(row.creationTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('wechat.status')" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.status==0?'下架':'上架' }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('wechat.actions')" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.status==1" size="mini" type="success" @click="handleModifyCommentStatus(row,'0')">
              {{ $t('wechat.the_shelves') }}
            </el-button>
            <el-button v-if="row.status==0" size="mini" type="success" @click="handleModifyCommentStatus(row,'1')">
              {{ $t('wechat.shelves') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { fetchList, postStatus, postAndComments,postCommentStatus } from '@/api/community'
export default {
  name: 'Tab',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        importance: undefined,
        title: undefined,
        status: '-1',
        orderBy: 'likes',
        order: 1
      },
      detail: {
        postdata: {},
        postcoments:[]
      },
      dialogFormVisible: false,
      postId: { post_id: '' },
      comment_id: { comment_id: '' },
      wechatTypeOptions: [{ display_name: '全部', key: '-1' }, { display_name: '下架', key: '0'}, { display_name: '上架', key: '1' }]
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created() {
   // this.getList()
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
      dateFormat:function(date){
        if(date == undefined){return ''};
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.info.list
        this.total = response.info.count

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    handleModifyStatus(row, status) {
      this.postId.post_id = row.postId
      postStatus(this.postId).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      })
    },
    handleModifyCommentStatus(row, status) {
      this.comment_id.comment_id = row.comment_id
      postCommentStatus(this.comment_id).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      })
    },
    getPostAndComments(row) {
      this.dialogFormVisible = true
      this.postId.post_id = row.postId
      postAndComments(this.postId).then(response => {
       // console.log(response)
        this.detail.postdata = response.info.postdata
        this.detail.postcoments = response.info.postcoments
        //console.log(this.detail.postcoments)
      })
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 30px;
  }
</style>
